<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue.js 事件处理器</title>
		<script src="../js/vue.min.js"></script>
	</head>
	<body>
		<!-- 事件监听可以使用 v-on 指令 -->
		<div id="app">
			<button v-on:click="counter += 1">增加1</button>
			<p>这个按钮被点击了 {{ counter }} 次。</p>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					counter:0
				}
			})
		</script>
		<p>---------------------------------------</p>
		<!-- v-on 可以接收一个定义的方法来调用 -->
		<div id="app1">
			<button v-on:click="greet">Greet</button>
		</div>
		<script>
			var app1 = new Vue({
				el:'#app1',
				data:{
					name:'Vue.js'
				},
				//在methods对象中定义方法
				methods:{
					greet:function(event){
						//this在方法里指当前Vue实例
						alert('Hello'+this.name+'!')
						//event是原生DOM事件
						if(event){
							alert(event.target.tagName)
						}
					}
				}
			})
			// 也可以用 JavaScript 直接调用方法
			app1.greet()
		</script>
		<p>--------------------------------------------</p>
		<!-- 除了直接绑定到一个方法，也可以用内联 JavaScript 语句 -->
		<div id="app2">
			<button v-on:click="say('hi')">Say hi</button>
			<button v-on:click="say('what')">Say what</button>
		</div>
		<script>
			new Vue({
				el:'#app2',
				methods:{
					say:function(message){
						alert(message)
					}
				}
			})
		</script>
	</body>
</html>
